<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_kn6ig9l5b8o.css">
    <link rel="stylesheet" href="../style/public.css">
    <title>我的</title>
    <style>
        body{
            background: #f7f7f7;
        }
        header{
            height: 150px;
        }
        header img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .item-info{
            border-radius: 10px;
        }
    </style>
</head>
<body>
    
    <header class="fl aic baa pa10">
        <div class="headshot fl aic mt-20">
            <img class="head-img" src="../image/tou.png" alt="">
            <a href="./login.html" class="f18 ml-10">登录/注册</a>
        </div>
    </header>

    <div class="fca h80 bafff">
        <p class="fcc fdc">
            <i class="iconfont icon-aichele f36 c4f8"></i>
            <span>爱车</span>
        </p>
        <a href="./live.html" class="fcc fdc link">
            <i class="iconfont icon-xiai f36 cb54"></i>
            <span>喜欢</span>
        </a>
        <a href="./concern.html" class="fcc fdc link">
            <i class="iconfont icon-wodeguanzhu f36 "></i>
            <span>关注</span>
        </a>
    </div>

    <div class="pa5">
        <a class="item-info link fl aic h40 bafff mt-5" href="./info.html">
            <i class="iconfont icon-pinglun f18 ml-10"></i>
            <span class="ml-10 f14">信息</span>
        </a>
        <a class="item-info link fl aic h40 bafff mt-5" href="./footprint.html">
            <i class="iconfont icon-zuji f18 ml-10"></i>
            <span class="ml-10 f14">足迹</span>
        </a>
        <a class="item-info link fl aic h40 bafff mt-5" href="./opus.html">
            <i class="iconfont icon-shouye1 f18 ml-10"></i>
            <span class="ml-10 f14">作品</span>
        </a>
        <a class="item-info link fl aic h40 bafff mt-5" href="./set.html">
            <i class="iconfont icon-shezhi f18 ml-10"></i>
            <span class="ml-10 f14">设置</span>
        </a>
    </div>


    <div style="height: 50px;"></div>
    <footer class="footer w100p bafff fixed h50">
        <div  class="footer-item fl aic jcsa">
            <a v-for="(item, index) in list" :key="item.id" :class="['footer-item fcc fdc', item.id === 5 ? 'cba' : '']" :href="item.herf">
                <i :class="['iconfont f22',item.icon]"></i>
                <span class="mt-5">{{ item.name }}</span>
            </a>
        </div>
    </footer>

    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/common.js"></script>
    <script>
        window.onload = function () {
            const isLoggedIn = localStorage.getItem('isLoggedIn');
            // 判断是否登录，进行header样式修改
            if (isLoggedIn === 'true') {
                let headImg = document.querySelector('.head-img');
                let loginText = document.querySelector('.headshot a');
                headImg.src = '../image/user-headshot4.png';
                loginText.href = '#';
                loginText.innerText = '🍞面包🍞';
            }

            // 获取所有的.item-info元素（包含各个功能链接）
            const itemsInfo = document.querySelectorAll('.link');
            const isLoggedInForLinks = localStorage.getItem('isLoggedIn') === 'true';

            // 遍历每个.-item-info元素，为其添加点击事件监听器
            itemsInfo.forEach(item => {
                item.addEventListener('click', function (e) {
                    e.preventDefault(); // 阻止默认的链接跳转行为
                    if (!isLoggedInForLinks) {
                        alert('请先登录');
                    } else {
                        window.location.href = this.href;
                    }
                });
            });
        };

    </script>
</body>
</html>